<template>
  <div class="home">
    <!-- <iptText type="input" maxlength="20" /> -->
    <!-- <input type="text" v-model="ipt" v-maxlength="20" /> -->
    <!-- <textarea name="" id="" cols="30" rows="10" v-model="ipt" v-maxlength="20"></textarea> -->
    <!-- <button @click="btnT">dianji</button> -->
    <!-- <input type="text" v-model="ipt" />
    <input type="text" v-model="ipt1" />
    <button @click="btn">点击</button>
    <input type="checkbox" value="吃" v-model="arr" name id />
    <input type="checkbox" value="喝" v-model="arr" name id />
    <input type="checkbox" value="玩" v-model="arr" name id />
    <input type="checkbox" value="乐" v-model="arr" name id />
    {{arr}}
    <input type="radio" v-model="test" value="男" name id />
    <input type="radio" v-model="test" value="女" name id />
    {{test}}
    <button ref="box">按钮</button>
    <input type="text" v-focus v-model="num" />-->
    <!-- <Child :num="num" @parentNode="parentText"> -->
    <!-- <template v-slot:header>
        <h1>header</h1>
      </template>
      <p>body</p>
      <template v-slot:footer>
        <p>footer</p>
      </template>
    <template v-slot="slotP">{{slotP.obj.age}}</ template>-->
    <!-- </Child> -->
    <!-- <div>{{text | capitalize}}</div>{{Num}} -->
    {{ipt}}
  </div>
</template>

<script>
// import { getTest } from "../api/test";
import iptText from "./iptText";
// import Child from "./Child";
// import { mapState } from "vuex";
export default {
  name: "Home",
  // mixins: [
  //   {
  //     data() {
  //       return {
  //         mixinsT: "123"
  //       };
  //     }
  //   }
  // ],
  data() {
    return {
      ipt: ""
      // arr: [],
      // test: "",
      // num: "999",
      // obj: {
      //   test: "111",
      //   num: "234"
      // },
      // text: "abc"
    };
  },
  mounted() {
    // console.log(this.$axios())
    // this.$axios.get("http://localhost:2345/classify/list").then(res => {
    //   this.ipt = res.data.data;
    // });

    this.$axios({
      url: "http://localhost:2345/classify/list",
      method: 'get',
    }).then(res =>{
      console.log(res)
    });
    // let r = await getTest();
    // this.ipt = r.data.data
    // console.log(this.$refs.box);
    // console.log(this.mixinsT);
  },
  methods: {
    // btnT() {
    //   this.$router.push("/parent");
    // },
    // btn() {
    //   console.log(this.ipt);
    // },
    // parentText(e) {
    //   console.log(e);
    // }
  },
  computed: {
    // ...mapState('home',['Num']),
    // ipt1() {
    //   return this.ipt;
    // }
  },
  components: {
    // Child
    iptText
  },
  filters: {
    // capitalize: function(value) {
    //   console.log(value);
    //   return value.charAt(0).toUpperCase() + value.slice(1);
    // }
  }
  // watch: {
  //   obj: {
  //     // handler 不能改变
  //     handler: function(val, oldVal) {
  //       console.log(val);
  //       console.log(oldVal);
  //     },
  //     deep: true, //加了以后能监听到obj下面的任意一个属性的值
  //     immediate: true //页面初始化完成之后就调用监听器
  //   },
  //   num: function(newVal, oldVal) {
  //     console.log(newVal);
  //     console.log(oldVal); //改变完成之后之前的值
  //   },
  //   num(newVal, oldVal) {
  //     console.log(newVal);
  //     console.log(oldVal); //改变完成之后之前的值
  //   }
  // },
  // directives: {
  //   maxlength: {
  //     inserted(el, binding) {
  //       console.log(el);
  //       let parent = el.parentNode;
  //       let span = document.createElement("span");
  //       let div = document.createElement("div");
  //       span.innerHTML = "0/" + binding.value;
  //       parent.appendChild(span);
  //       el.setAttribute("maxlength", binding.value);
  //     },
  //     update(el, binding) {
  //       el.nextElementSibling.innerHTML = el.value.length + "/" + binding.value;
  //       if(el.value.length == binding.value){
  //         el.style="color:red"
  //       }else{
  //         el.style="color:block"
  //       }
  //     }
  //   }
  // 自定义指令 是一个对象 有五个钩子函数 有
  // oldVnode 只能在componentUpdated Updated使用
  //钩子
  // focus: {
  //   // 在第一次绑定dom初始化的时候调用一次
  //   bind(el, binding, vnode, oldVnode) {
  //     // console.log(el);//操作Dom，指令所绑定的元素
  //     // console.log(binding);//对象
  //     console.log(vnode); //虚拟节点
  //     console.log(oldVnode); //上一个虚拟节点
  //   },
  //   // 被绑定元素插入父节点时调用
  //   inserted(el, binding, vnode, oldVnode) {
  //     // console.log(el);//操作Dom，指令所绑定的元素
  //     // console.log(binding);//对象
  //     console.log(vnode); //虚拟节点
  //     console.log(oldVnode); //上一个虚拟节点
  //     el.focus();
  //   },
  //   // 元素改变时调用(虚拟DOm修改的时候)
  //   update(el, binding, vnode, oldVnode) {
  //     // console.log(el);//操作Dom，指令所绑定的元素
  //     // console.log(binding);//对象
  //     console.log(vnode); //虚拟节点
  //     console.log(oldVnode); //上一个虚拟节点
  //   },
  //   // 父子节点全部改变完场后调用（真实Dom修改的修改）
  //   componentUpdated(el, binding, vnode, oldVnode) {
  //     // console.log(el);//操作Dom，指令所绑定的元素
  //     // console.log(binding);//对象
  //     console.log(vnode); //虚拟节点
  //     console.log(oldVnode); //上一个虚拟节点
  //   },
  //   // 指令与元素解绑时调用只调用一次(dom元素不存在的时候 v-if=true)
  //   unbind(el, binding, vnode, oldVnode) {
  //     // console.log(el);//操作Dom，指令所绑定的元素
  //     // console.log(binding);//对象
  //     console.log(vnode); //虚拟节点
  //     console.log(oldVnode); //上一个虚拟节点
  //   }
  // }
};
</script>
